<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>媒体服务器功能演示</title>
    <style>
      label {
        display: inline-block;
        width: 80px;
        text-align: right;
        margin-right: 10px;
        vertical-align: top;
      }
      input {
        width: 200px;
        margin-right: 10px;
      }
      select {
        width: 200px;
        margin-right: 10px;
      }
      button {
        margin-top: 10px;
      }
      .input-group {
        display: inline-block;
        vertical-align: top;
        margin-bottom: 10px;
      }
      .input-group:first-child {
        margin-right: 10px;
      }
      .input-group:last-child {
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <h1>媒体服务器功能演示</h1>
    <hr />
    <div class="input-group">
      <label for="serverAddress">服务地址：</label>
      <input type="text" id="serverAddress" value="ws://192.168.70.25:9005" />
    </div>
    <div class="input-group">
      <label for="roomId">房间号：</label>
      <input type="text" id="roomId" value="50071" />
    </div>
    <div class="input-group">
      <label for="roomPasswd">房间密码：</label>
      <input type="text" id="roomPasswd" value="222222" />
    </div>

    <hr />
    <button id="noteButton">开始会议纪要</button>
    <hr />
    <div id="output"></div>
    <script>
      let socket;
      let seqId = 0; // 唯一序列ID从0开始

      const noteButton = document.getElementById('noteButton');
      const output = document.getElementById('output');

      noteButton.addEventListener('click', event => {
        if (noteButton.innerText === '停止会议纪要') {
          socket.close()
        }else if (noteButton.innerText === '开始会议纪要') {
          const serverAddress = document.getElementById('serverAddress').value;
          const roomId = document.getElementById('roomId').value;
          const roomPasswd = document.getElementById('roomPasswd').value;
          socket = new WebSocket(`${serverAddress}/${roomId}/${roomPasswd}/start_note`);
          socket.addEventListener('open', event => {
            console.log('WebSocket已打开：', event);    
            noteButton.innerText = '停止会议纪要';
            noteButton.disabled = true;
          });
          socket.addEventListener('close', event => {
            console.log('WebSocket已关闭：', event);
            noteButton.innerText = '开始会议纪要';
          });
          socket.addEventListener('message', event => {
            const jsonMsg = JSON.parse(event.data);
            if (jsonMsg.type === "result") {
              const resultData = jsonMsg.data;
              console.log('执行结果为：', resultData);
              output.innerText += `执行结果为：${JSON.stringify(resultData)}\n`;
              if (resultData.code !== 0) {
                socket.close();
              }else if (resultData.command === 'start_note'){
                noteButton.disabled = false;
              }
            } else if (jsonMsg.type === "iat_result") {
              const resultStr = jsonMsg.data.result;
              console.log('result字符串为:', resultStr);
              output.innerText += resultStr;
            } else {
              console.log('WebSocket收到消息:', event);
              output.innerHTML += `<p>${event.data}</p><br>`;
            }
          });
          socket.addEventListener('error', event => {
            console.error('WebSocket出错：', event);
          });
        }
      });      
    </script>
  </body>
</html>